﻿@model Epi.Web.MVC.Models.AccountInfoModel
@{
    ViewBag.Title = "Index";
}

<script type="text/javascript">



    $(document).ready(function () {
        // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
       // $('.success').hide();
        $('#CreateAccount').attr("disabled", "disabled");
        $('#TermOfUse').hide();

          $("#TermOfUseLable").click(function () {
        if ($('#TermOfUse').is(":visible")) {
            $('#TermOfUse').hide();
            }else{

            $('#TermOfUse').show();
            }
        });

        $("#IagreeBox").change(function () {
            if (this.checked) {
                $('#CreateAccount').removeAttr("disabled");
            } else {

                $('#CreateAccount').attr("disabled", "disabled");
            }
        });
    });

    
 
    
    
</script>
<style>
    .pageheader {font: 24px Segoe UI; color:#286655;}
    .h2header {font: 20px Segoe UI; color:#286655; font-weight:400;}
    .accountdiv {float:right; width:400px; background:#EBEFF5; border:1px solid #bfbfbf; border-radius:15px; padding:10px 10px 10px 20px;}
    .introdiv {float:left; width:355px; padding:0 10px 0 0;}
    .accountlabel {font: 14px Segoe UI; font-weight:600;}
    .termsofuse {width:790px; padding:5px; height: 300px; border:2px solid #bfbfbf; font: 12px Arial; line-height:1.8em; overflow:auto;}
    .submits {
     border: 1px #4e9689 solid;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
     -khtml-border-radius: 10px;
     border-radius: 10px;
     padding: 3px 5px 3px 5px;
     color:#3f3f3f;
     font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
     font-size: 10pt;
     font-weight:bold;
     padding-left:10px;
     height: 35px;
     width:100px;
     cursor:pointer;
     border: 1px solid rgba(0,0,0,0.5);
     box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
     -o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
     -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
     -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
     }
     .submits:hover { background: #ffc;}
     .create {background: #5880b3; background: rgba(88,128,179,0.6); max-width: 160px; width:100%;}
     [disabled] { color:#737882; background-color:#dfdfce;
         box-shadow: 0 2px 6px rgba(0,0,0,0.1), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3); 
         -o-box-shadow: 0 2px 6px rgba(0,0,0,0.1), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
     -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.1), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
     -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.1), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);         
     }
     [disabled]:hover {background-color:#dfdfce;}
     .Account
     {
        width:350px;
        height:24px;
        font: 14px Segoe UI; 
      }
    .field-validation-error {
    color: #ff0000;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors {
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid {
    display: none;
}
}
</style>

  @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "myform", @class = "" }))
      { 
<div id="header"><h1>Epi Info Web Survey </h1></div>
<div id="content" style="margin:1em;">

 @if (Model.Status != "SUCCESS")
     {
    <div id="head">
        <h1 class="pageheader">Create Account</h1>
    </div>
    <div style="margin-bottom: 100px;">
    <div id="IntroForm" class="introdiv">
        <h2 class="h2header">Epi Info Web Survey</h2>
        <p>
            The Epi Info™ Web Survey System allows the survey designer to collect information from participants over the internet. The ability to distribute and collect surveys remotely is unique to Epi Info™ 7 and provides survey designers access to a wide variety and number of participants.
            Participants access the web survey and submit their responses through a web browser or mobile device. 
        </p>
        <h2 class="h2header">How it works</h2>
        <p>
            Complete the information and create an account for your organization.
            You will then receive an email with configuration settings to publish surveys to the web using Epi Info 7™. You can then start publishing your surveys.
        </p>
    </div>
    <div  id="AccountForm" class="accountdiv" style="">
        <p>
            @Html.ValidationMessage("Error")<br>
            <label class="accountlabel" id="OrganizationNamelabel">Organization Name:</label><br>
         
          @Html.TextBoxFor(m => m.OrgName, new { @class = "Account" }) <br>
          @Html.ValidationMessageFor(m => m.OrgName, null, new { @class = "required" })
        </p>

        @if (@System.Configuration.ConfigurationManager.AppSettings["ACCOUNT_TYPE"] == "USER")
            {
         <p>
            <label class="accountlabel"  id="LastName">Last Name:</label><br>
          
            @Html.TextBoxFor(m => m.LastName, new { @class = "Account" }) <br>
             @Html.ValidationMessageFor(m => m.LastName, null, new { @class = "required" })
        </p>
        <p>
            <label class="accountlabel"  id="FirstName">First Name:</label><br>
          
            @Html.TextBoxFor(m => m.FirstName, new { @class = "Account" }) <br>
             @Html.ValidationMessageFor(m => m.FirstName, null, new { @class = "required" })
        </p>

         <p>
            <label class="accountlabel"  id="PhoneNumber">Phone Number:</label><br>
          
            @Html.TextBoxFor(m => m.PhoneNumber, new { @class = "Account" }) <br>
             @Html.ValidationMessageFor(m => m.PhoneNumber, null, new { @class = "required" })
        </p>

            
      <p>
            <label class="accountlabel"  id="AddressLine1">Address Line 1:</label><br>
          
            @Html.TextBoxFor(m => m.AdressLine1, new { @class = "Account" }) <br>
             @Html.ValidationMessageFor(m => m.AdressLine1, null, new { @class = "required" })
        </p>
        <p>
            <label class="accountlabel"  id="AddressLine2">Address Line 2:</label><br>
          
            @Html.TextBoxFor(m => m.AdressLine2, new { @class = "Account" }) <br>
             @Html.ValidationMessageFor(m => m.AdressLine2, null, null)
        </p>
        <p>
            <label class="accountlabel"  id="City">City:</label><br>
          
            @Html.TextBoxFor(m => m.City, new { @class = "Account" }) <br>
             @Html.ValidationMessageFor(m => m.City, null, new { @class = "required" })
        </p>

         <p>
            <label class="accountlabel"  id="State">State:</label><br>
          
            @Html.DropDownListFor(m => m.SelectedState, Model.States, "-- Select A State --", new { @class = "Account" }) <br>
             @Html.ValidationMessageFor(m => m.SelectedState, null, new { @class = "required" })
        </p>
            
         <p>
            <label class="accountlabel"  id="Zip">Zip Code:</label><br>
          
            @Html.TextBoxFor(m => m.Zip, new { @class = "Account" }) <br>
             @Html.ValidationMessageFor(m => m.Zip, null, new { @class = "required" })
        </p>

            }



        <p>
            <label class="accountlabel"  id="Emaillabel">Email Address:</label><br>
          
            @Html.TextBoxFor(m => m.Email, new { @class = "Account" }) <br>
             @Html.ValidationMessageFor(m => m.Email, null, new { @class = "required" })
        </p>
        <p>
            <label class="accountlabel" id="ConfirmEmailLabel ">Confirm Email Address:</label><br>
           
             @Html.TextBoxFor(m => m.ConfirmEmail, new { @class = "Account" }) <br>
              @Html.ValidationMessageFor(m => m.ConfirmEmail, null, new { @class = "required" })
        </p>
        <p>
            <input type="checkbox" id="IagreeBox" for="IagreeBoxLabel" />
            <label class="accountlabel" id="IagreeBoxLabel" style="width:330px;"><span style="font-weight:normal !important;">I agree to the</span> <span style="font-weight:bold;">Terms of service and conditions of use</span></label>
        </p>
        <p>
            <input class="submits create" type="submit" id="CreateAccount" value="Create Account"   style="margin-right:90px;" />
           
        </p>
    </div>
    <div style="clear:both;"></div>
     <div id="TOU">
        <h2 class="h2header">Terms of service and conditions of use</h2>
        <div class="termsofuse">
          @Html.Raw(ViewData["TermOfUse"].ToString())
        </div>
    </div>
    

    </div>
     }
 else
     {
    <div class="success" style="margin:1em;">
     
        <div class="image" >
        <img src="@Url.Content("~/Content/images/button_check.png")" style="vertical-align: middle;width:40px;" alt=""/>
   
        </div>
        <div class="message">
            <span style="font: 14px Segoe UI; font-weight:600;">Your account has been created.</span><br />
            <span style="font: 14px Segoe UI; font-weight:400;">You will soon receive an email with account information to start publishing surveys from your organization. </span>
        </div>
        <div style="clear:both;"></div>
    </div>
     }
   
     
</div>

      }